﻿@model ProductListVM

@{
    ViewBag.Title = Model.PageMeta != null ? Model.PageMeta.Title : "产品展示";
}

@section header{
    @if (Model.PageMeta != null)
    {
        <meta name="keywords" content="@Model.PageMeta.Keyword" />
        <meta name="description" content="@Model.PageMeta.Description" />
    }
    <link href="~/plugins/Swiper/dist/css/swiper.min.css" rel="stylesheet" />
}

<div class="wrapper">
    <header class="page-header">
        <div class="container-fluid">

            <a href="/" class="top-logo">
                <div class="text  hidden-sm hidden-xs">
                    <h2> 品牌周边及礼品定制服务商</h2>
                    <p>Brand Peripherals &amp; Customized Gift Service</p>
                </div>
            </a>

            <div class="leftcol">
                <div class="menu-toggle">
                    <div class="one"></div>
                    <div class="two"></div>
                    <div class="three"></div>
                </div>
                <h2 class="title  visible-lg visible-md">产品定制</h2>
                <div class="topnav">
                    <ul>
                        @*<li><a href="@Url.Action("Index")" class="@(string.IsNullOrEmpty(Model.SeoName)?"active":"")">全部</a></li>*@
                        @foreach (var item in Model.Categories)
                        {

                            if (item.SeoName.Equals(Model.SeoName, StringComparison.InvariantCultureIgnoreCase))
                            {
                                <li><a href="@Url.Action("Index",new {seoName = item.SeoName})" class="active">@item.Title</a></li>
                            }
                            else
                            {
                                <li><a href="@Url.Action("Index",new {seoName = item.SeoName})">@item.Title</a></li>
                            }
                        }

                    </ul>
                </div>
            </div>


        </div>
    </header>
    <main class="page-case container-fluid page-products">
        @if (Model.Products.Any())
            {

                   <!-- Swiper -->
            <div style="padding:0 12px;">
                <div class="row">
                    @foreach (var item in Model.Products)
                {
                        <div class="col-sm-4 col-md-3">
                            <div class="item">
                                <a href="@Url.Action("Detail",new { id = item.Id})">
                                    <figure style="background-image:url(@item.Thumbnail)">
                                        <img src="~/Content/Desktop/img/case_p.png" alt="@item.ProductNo">
                                    </figure>
                                    <div class="text hidden-sm hidden-xs">
                                        <h3>@item.ProductName</h3>
                                        <p>@item.ProductNo</p>
                                    </div>
                                </a>
                            </div>
                        </div>

                    }

                </div>
                <!-- Add Pagination -->
                @*<div class="swiper-pagination"></div>*@
            </div>


        }
        else
        {
            <div class="alert alert-info">
                <i class="iconfont icon-info"></i> 没有任何记录！
            </div>
        }

    </main>
</div>






@section footer{
    <script src="~/bower_components/jquery.easing/js/jquery.easing.min.js"></script>
    <script src="~/plugins/Swiper/dist/js/swiper.jquery.min.js"></script>

    <script>
        //var initialization = function () {
        //    var query = Modernizr.mq('(orientation:landscape)');
        //    var winHeight = $(window).height(), headerHeight = $(".page-header").height(), footerHeight = $(".page-footer").height();
        //    var midHeight = query ? (winHeight - headerHeight - footerHeight - 46) / 2 : (winHeight - headerHeight - footerHeight - 70) / 3;
        //    // var imgHeight = $(".page-products .item img").height();
        //    //if (midHeight > imgHeight) {
        //    //    $(".page-products .item figure").height(imgHeight);
        //    //  //  alert(imgHeight);
        //    //    var paddingTop = midHeight - imgHeight;
        //    //    $(".page-products").css({ "padding-top": paddingTop + "px" });
        //    //} else {
        //    $(".page-products .item figure").height(midHeight);
        //    // }
        //}

        $(function () {
            //if (Modernizr.mq('(orientation:landscape)')) {
            //    $(".swiper-container").swiper({
            //        //  pagination: '.swiper-pagination',
            //        slidesPerView: 4,
            //        slidesPerColumn: 2,
            //        paginationClickable: false,
            //        spaceBetween: 6,
            //        mousewheelControl: true

            //    });
            //} else {
            //    $(".swiper-container").swiper({
            //        //  pagination: '.swiper-pagination',
            //        slidesPerView: 2,
            //        slidesPerColumn: 3,
            //        paginationClickable: false,
            //        spaceBetween: 6,
            //        mousewheelControl: true

            //    });
            //}


            //initialization();
            //$(window).resize(function () {
            //    if (Modernizr.mq('(orientation:landscape)')) {
            //        $(".swiper-container").swiper({
            //            //  pagination: '.swiper-pagination',
            //            slidesPerView: 4,
            //            slidesPerColumn: 2,
            //            paginationClickable: false,
            //            spaceBetween: 6,
            //            mousewheelControl: true

            //        });
            //    } else {
            //        $(".swiper-container").swiper({
            //            //  pagination: '.swiper-pagination',
            //            slidesPerView: 2,
            //            slidesPerColumn: 3,
            //            paginationClickable: false,
            //            spaceBetween: 6,
            //            mousewheelControl: true

            //        });
            //    }
            //    initialization();
            //})

            $(".page-products .item a").click(function () {
                location.href = $(this).attr("href");
            });


            $(".menu-toggle").on('click', function () {
                $(this).toggleClass("on");
                if ($('.topnav').hasClass("on")) {
                    $('.topnav').fadeOut(function () {
                        $('.topnav').removeClass("on");
                    })
                } else {
                    $('.topnav').addClass("on");
                    $('.topnav').fadeIn();
                }

            });
        });
    </script>
}